<script>

//  全局变量 
var work={};  // 作品详细信息 
var work_set={}; // 作品集合，如搜索结果
var last_id;
// 1 - 50 带圈数字① 
var cnum=['\u2460','\u2461', '\u2462', '\u2463', '\u2464','\u2465','\u2466','\u2467','\u2468','\u2469','\u246a','\u246b','\u246d','\u246e','\u246f','\u2470','\u2471','\u2472','\u2473', '\u3251', '\u3252', '\u3253','\u3254','\u3255','\u3256','\u3257','\u3258','\u3259', '\u325a','\u325b','\u325c','\u325d','\u325e','\u325f','\u32b0','\u32b1','\u32b2','\u32b3','\u32b4','\u32b5','\u32b6','\u32b7','\u32b8','\u32b9','\u32ba','\u32bb','\u32bc','\u32bd','\u32be','\u32bf']

// 搜索框内有键按下时的事件处理器 
function search_key_press(e, obj) {  
    if (!e) e = window.event;  
    if ((e.keyCode || e.which) == key_Enter) {  
       search_work(obj);
    }  
}  

// 搜索
function search_work(obj) {
    var url = "/v1/search";
    var keywords = $.t2s(obj.value.trim()); 
    var tip_blank = '关键字不能为空白';
    var tip_chinese ='关键字必须为中文不含标点'; 
    if ( keywords.length == 0 ) {
        obj.value= trans_text(tip_blank);
        obj.select();
        return;
    } else {
        if (has_nonchinese_char(keywords)) {
            obj.value=trans_text(tip_chinese);
            obj.select();
            return;
        }
    }
   if ( keywords == tip_blank || keywords == tip_chinese) {
        obj.select();
        return;
   }

    spinner_start();
    $.post(url, {_xsrf:$.cookie('_xsrf'), keywords:keywords}).done(function(data, status) {
          work_set = JSON.parse(data);
          if ( work_set.length == 0 ) {
               obj.value = trans_text(obj.value + ' 没有匹配记录。');
               obj.select();
               return;
          } else {
               obj.value = trans_text(obj.value + ' 共' + work_set.length + '首'); 
               obj.select();
          }
          display_search_result(work_set);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("搜索失败: " + textStatus + ": " + errorThrown );
    }).always(function() {
        spinner_stop();
    });
}


function display_search_result(work_set) {
  //console.log("search result item number: " + work_set.length);
  //console.log("display style: " + tilestyle);
  if ( work_set.length == 0 ) {
      return 0;
  }
  var html = template('template_work_search_result', {wsrs: get_tilestyle(), works:work_set});
  //console.log(html);
  $('#content').html(trans_text(html));
  // 添加搜索结果事件处理器 
  search_result_event_handler();
}

//  作品详细模板渲染入口
function get_work(id) {
    var url = "/v1/get";

    if ( last_id == id ) {
       show_work_detail(work);
       return;
    }

    spinner_start();
    $.post(url, {_xsrf:$.cookie('_xsrf'), id:id}).done(function(data, status) {
        work = JSON.parse(data);
        show_work_detail(work);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("获取作品详细信息失败: " + textStatus + ": " + errorThrown );
    }).always(function() {
        spinner_stop();
    });
}

// 经典模板渲染入口
function classic_work() {
    var url = "/v1/classicwork";
    spinner_start();
    $.post(url, {_xsrf:$.cookie('_xsrf'), id:""}).done(function(data, status) {
        work = JSON.parse(data);
        show_work_detail(work);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("获取经典作品失败: " + textStatus + ": " + errorThrown );
    }).always(function() {
        spinner_stop();
    });
}

function show_work_detail(work) {
    let mark = get_mark();
    work.mark = pzable(work.category)?mark:(mark==='pz'?'none':mark);
    work.cnum = cnum;
    last_id = work.id;
    var html = template('template_work_detail', work);
    $('#modal_content').html(trans_text(html));
    $('#modal').trigger('md_show');
    // 添加作品显示区事件处理器
    show_event_handler();
}

function update_work_detail_body() {
    let mark = get_mark();
    if ( typeof(work) == 'undefined' || $.isEmptyObject(work) ) return;
    work.mark = pzable(work.category)?mark:(mark=='pz'?'none':mark);
    var html= template('template_work_detail_body_zw', work);
    $('#work_body').html(trans_text(html));
    show_body_event_handler();
}

/*
 * 辅助函数：返回第一个标点符号前的字符串
 */
function firstsection(text) {
    var separators=" ,.?，。、？";
    var value = text;
    for ( i in separators ) {
        var s = separators.charAt(i);
        value = value.split(s)[0];
    }
    return value;
}

function search_result_event_handler() {
    work_set.forEach(function(item, index) {
        var id = "#" + item.id;
        //console.log("为作品" + item.id + "添加事件处理器");
        // 从服务器拿到作品详细信息并在显示区显示
        $(id).on('click', function() { get_work(item.id);});
    });
}

// 作品显示区事件处理器
function show_event_handler(){
    show_header_event_handler(); // 作品显示区头部事件处理器
    show_body_event_handler(); // 作品显示区中部事件处理器
    show_footer_event_handler(); // 作品显示区尾部事件处理器
}

function show_header_event_handler() {
    // 朗读作品
    $('#readwork').on('click', function() {
        // work是全局变量，保存当前作品显示区内作品的信息
        var tts = [work.name, work.author, work.preface, work.lines].join(' '); 
        read_work(tts);
    });
    // 显示拼音
    $('#py').on('click', function() { toggle_pinyin(); });
    // 显示平仄
    $('#pz').on('click', function() { toggle_pz(); });
    // 编辑作品 - work是全局变量保存当前选中的作品
    $('#edit').on('click', function() { edit_work(work); });
    // 删除作品
    $('#delete').on('click', function() { del_work(work.id); });
    // 关闭作品详细信息显示框
    $('#show_header_close').on('click', function() { $('#modal').trigger('md_close');});
}
function show_footer_event_handler() {
    // 关闭作品详细信息显示框
    $('#show_footer_close').on('click', function() { $('#modal').trigger('md_close');});
}

function show_body_event_handler() {
   // 显示隐藏作品正文
   $('#work_body_prompt').on('click', function() { $('#work_body').toggle(); });
   // 显示隐藏作品名称注释
   work.name.split('\n').forEach(function(item, index) {
     var nid = "#work_name_" + index, cid="#name_comment_" + index;
     $(nid).on('click', function() { $(cid).toggle(); });
     $(nid).on('mouseover', function() { $(cid).show(); });
     $(nid).on('mouseout', function() { $(cid).hide(); });
   // 查看作者生平介绍
     var aid = "#work_author_" + index;
     $(aid).on('click', function() { window.open('http://baike.baidu.com/item/' + work.author ); });
   });
   // 显示隐藏作品序言
   work.preface.split('\n').forEach(function(item, index) {
     var pid = "#work_preface_" + index, cid="#preface_comment_" + index;
     $(pid).on('click', function() { $(cid).toggle(); });
     $(pid).on('mouseover', function() { $(cid).show(); });
     $(pid).on('mouseout', function() { $(cid).hide(); });
   });
   // 显示隐藏作品正文每一行的注释
   work.lines.split('\n').forEach(function(item, index) {
       var pid = "#lines_" + index, cid = "#lines_" + index + "_comment";
       $(pid).on('click', function() { $(cid).toggle(); });
       $(pid).on('mouseover', function() { $(cid).show(); });
       $(pid).on('mouseout', function() { $(cid).hide(); });
   });
   // 显示隐藏作品注释（包含所有注释）
   $('#work_comment_prompt').on('click', function() { $('#work_comment').toggle(); });
   // 显示隐藏作品赏析
   $('#work_analyse_prompt').on('click', function() { $('#work_analyse').toggle(); });
   // 显示隐藏作品标签
   $('#work_tag_prompt').on('click', function() { $('#work_tag').toggle(); }); 
}

/*
 * 模板辅助函数：标注拼音或平仄
 * text:  字符串，要标注拼音或平仄的文本
 * ptext: 数组，每个单元为对应字符的拼音
 * mark:  字符串，"pinyin/pz/none", 要标注的是拼音、平仄还是不标注
 * pz: 布尔，false/true, 是否需要标平仄，如诗名称、作者、序都不需要标注平仄
 */
template.helper('mark_shici', function(text, ptext, mark, pz) {
    var html = '';
    var data = {text:text, dan_pinyin:ptext, duo_pinyin:[]};
    switch( mark ) {
        case 'pinyin' :
            html = gen_pinyin_html(data);
            break;
        case 'pz' :
            html = pz?gen_pz_html(data):text;
            break;
        default :
            html = text;
    }
    return html.trim(); 
});

// 模板辅助函数：生成百度百科链接
// type: 字符串，类别：shi-诗 ci-词
// name: 字符串, 文章名称 
// line: 字符串，文章第一句 
template.helper('ci_baike', function(type, name, line) {
    var url = "http://baike.baidu.com/item/";
    url += name;
    if ( type == '词' ) {
       url += '·' + firstsection(line); 
    }
    return url;
});

// 根据作品类型判断是否显示平仄
template.helper('pz', function(category) {
   return pzable(category);
});

// 模版辅助函数 - 判读注释是否为空
template.helper('isblank', function(comment) {
   var count = isblank(comment);
   return count?false:true;
});

// 模版辅助函数 - 确定是否首行缩进
template.helper('indent', function(text) {
    return indent(text);
});
</script>

{# 作品搜索结果显示模版 _ 总入口 #}
<script id="template_work_search_result" type="text/html">
<div class="work_search_result_container">
  <% for (var id in works ) { %>
    <% if ( wsrs == 'card' ) { %>
      <% include('template_work_search_result_card', works[id]) %>
    <% } else if ( wsrs == 'bookmark' ) { %>
      <% include('template_work_search_result_bookmark', works[id]) %>
    <% } %>
  <% } %>
</div>
</script>

{# 作品搜索结果显示模板：以贴片/书签的方式显示作品 #}
<script id="template_work_search_result_bookmark" type="text/html">
<div class="wsri"> {# wsri = work search result item #}
  <div class="wsri_bookmark" id="<%=# id %>">
      <div class="bookmark_head">
         <span class="bookmark_name"><%=# name %></span>
         <span class="bookmark_line"><%=# lines.split('\n')[0] %></span>
      </div>
      <div class="bookmark_tail">
        <span class="bookmark_author"><%=# author %></span>
      </div>
  </div>
</div>
</script>

<script id="template_work_search_result_card" type="text/html">
<div class="wsri"> {# wsri = work search result item #}
  <div class="wsri_card" id="<%=# id %>">
      <p><span class="card_name"><%=# name %> </span><span class="card_author"> <%=# author %></span></p>
      <p class="card_preface"><%= preface %></p>
      <% lines.split('\n').forEach(function(item, index) { %>
        <p class="card_line"><%=# item %></p>
      <% }) %>
    </div>
</div>
</script>

{# 作品详细界面模版：模态框容器模版 #}
<script id="template_work_detail" type="text/html">
  <div class="modal_header show_work_header">   <% include('template_work_detail_header') %> </div> 
  <div class="modal_body show_work_body"> <% include('template_work_detail_body')   %> </div>
  <div class="modal_footer show_work_footer">   <% include('template_work_detail_footer') %> </div> 
</script>

{# 作品详细界面模版：模态框头部功能区 显示朗读、拼音和关闭按键 #} 
<script id="template_work_detail_header" type="text/html">
  <% var tts_text = name + ' ' + author + ' ' + preface + ' ' + lines %>
<div class="show_work_menu">
  <span   class="show_work_menu_item" title="朗读是通过语音合成方式完成，需要访问互联网。语音、语调、多音字、朗读连贯性等方面尚待完善，仅供参考。" id="readwork" > 朗读 </span>
  <span class="show_work_menu_separator"> | </span>
  <span  class="show_work_menu_item" title="显示拼音 通过程序自动标注，多音字尚不能完全准确标注，因此标注的拼音仅供参考。" id="py" > 拼音 </span>
 <% if ( pz(category) ) { %>
  <span class="show_work_menu_separator"> | </span>
  <span  class="show_work_menu_item" title="根据拼音声调自动标注平仄，仅供参考。" id="pz" > 平仄 </span>
 <% } %>
 <span class="show_work_menu_separator"> | </span>
 <span  class="show_work_menu_item" title="编辑作品。"  id="edit" > 编辑 </span>
 <span class="show_work_menu_separator"> | </span>
 <span  class="show_work_menu_item" title="删除作品。"  id="delete" > 删除 </span>
</div>
<div>
  <span id="show_header_close" class="modal_close" title="关闭此页面">关闭</span>
</div>
</script>

{# 作品详细界面模版：模态框尾部功能区 显示关闭按键 #}
<script id="template_work_detail_footer" type="text/html">
    <span id="show_footer_close" class="modal_close" >关闭</span>
</script>

{# 作品详细界面模版：模态框内容主界面 #}
<script id="template_work_detail_body" type="text/html">
  <div class="show_work_item"> <% include('template_work_body') %> </div>
{#  <div class="show_work_item"> <% include('template_work_comment') %> </div> #}
  <div class="show_work_item"> <% include('template_work_analyse') %> </div>
  <div class="show_work_item"> <% include('template_work_tag') %> </div>
</script>

{# 作品详细界面模版：内容主界面 _ 作品原文 #} 
<script id="template_work_body" type="text/html">
<div id="work_body_container">
  <div id="work_body_prompt" class="work_item_prompt">原文</div>
  <div id="work_body" class="show_work_body_zw"><% include('template_work_detail_body_zw') %> </div>
</div>
</script>

{# 作品详细界面模版：内容主界面 _ 作品原文 各子项 #} 
<script id="template_work_detail_body_zw" type="text/html">
<% name.split('\n').forEach(function(item, index) { %>
  <div>
    <p><span id="work_name_<%=# index %>" class="show_work_name">《<%=#mark_shici(item, pname[index], mark, false)%>》</span>
    <span id="work_author_<%=# index %>" class="show_work_author"> <%=#mark_shici(author, pauthor[index], mark, false) %></span></p>
  </div>
  <% if ( !isblank(comment['name'][index]) ) { %>
    <div id='name_comment_<%=# index %>' class="show_work_comment" hidden>
         <% var data = 'name' in comment?{comment:comment['name'][index],cnum:cnum}:{comment:[],cnum:cnum}; %>
         <% include('template_comment_item', data) %>
    </div>
  <% } %>
<% }) %>

<% preface.split('\n').forEach(function(item, index) { %>
  <div id="work_preface_<%=# index %>" class="show_work_preface" data="zw"<%=# indent(item) %> ><%=#mark_shici(item, ppreface[index], mark, false) %></div>

    <% if (!isblank(comment['preface'][index])) { %>
    <div id='preface_comment_<%=# index %>' class="show_work_comment" hidden>
      <% var data = 'preface' in comment?{comment:comment['preface'][index],cnum:cnum}:{comment:[],cnum:cnum}; %>
      <% include('template_comment_item', data) %>
    </div>
  <% } %>
<% }) %>

<% lines.split('\n').forEach(function(item, index) { %>
  <div id="lines_<%=# index %>" data="zw" class="show_work_line" <%=# indent(item) %>> 
    <span><%=#mark_shici(item, plines[index], mark, true) %> </span>
  </div> 
    <% if (!isblank(comment['lines'][index])) { %>
      <div id="lines_<%=# index %>_comment" class="show_work_comment" hidden> 
      <% var data = 'lines' in comment?{comment:comment['lines'][index],cnum:cnum}:{comment:[],cnum:cnum}; %>
        <% include('template_comment_item', data) %>
      </div>
  <% } %>
<% }) %> 
</script>

{# 作品详细界面模版：内容主界面 _ 注释 #} 
<script id="template_work_comment" type="text/html">
<div id="work_comment_container">
 <div id="work_comment_prompt" class="work_item_prompt">注释</div>
 <div id="work_comment" >
  <p class="show_work_comment">
  <% for (var index in comment['name']) { %>
   <% var data = 'name' in comment?{comment:comment['name'][index],cnum:cnum}:{comment:[],cnum:cnum}; %>
   <% include('template_comment_item', data) %>
  <% } %>
  <% for (var index in comment['preface']) { %>
   <% var data = 'preface' in comment?{comment:comment['preface'][index],cnum:cnum}:{comment:[],cnum:cnum}; %>
   <% include('template_comment_item', data) %>
  <% } %>
  <% for (var index in comment['lines']) { %>
   <% var data = 'lines' in comment?{comment:comment['lines'][index], cnum:cnum }:{comment:[],cnum:cnum}; %>
   <% include('template_comment_item', data) %>
  <% } %>
  </p>
 </div>
</div>
</script>

{# 作品详细界面模版：显示注释条目 #} 
<script id="template_comment_item" type="text/html">
<% for ( var index in comment) { %>
  <% for ( var key in comment[index] ) { %>
    <span class="show_comment_key"><%=# cnum[index] %><%=# key %>: </span><span class="show_comment_value"><%=# comment[index][key] %></span>
  <% } %>
<% } %>
</script>

{# 作品详细界面模版：内容主界面 _ 赏析 #} 
<script id="template_work_analyse" type="text/html">
<% if ( !isblank(analyse) ) { %>
<div id="work_analyse_container">
  <div id="work_analyse_prompt" class="work_item_prompt">赏析</div>
  <div id="work_analyse" class="show_work_analyse">
     <% analyse.split('\n').forEach(function(item, index) { %>
       <p><%=# item %></p>
     <% }) %>
  </div>
</div>
<% } %>
</script>

{# 作品详细界面模版：内容主界面 _ 标签 #} 
<script id="template_work_tag" type="text/html">
<div id="work_tag_container">
  <div id="work_tag_prompt" class="work_item_prompt">标签</div>
  <div id="work_tag" class="show_work_tag"><%=# tag.join(' ') %></div>
</div>
</script>

{# 作品搜索结果显示风格配置区 #}
<style>
.work_search_result_container {
  width: 100%;
  margin-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.wsri {
 margin: 10px;
 width: 320px; 
 padding: 10px;
 background-color: #c2c8f6;
 box-shadow: 5px 5px 5px #888888;
 border-radius: 5px;
}
.wsri:hover {
    box-shadow: 0px 0px 10px 10px White;
}

.wsri_bookmark {
  height: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.bookmark_head {
  width: 80%;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  color: Gray;
}
.bookmark_tail {
  width: 20%;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: right;
  text-overflow: ellipsis;
}
.bookmark_name {
  color: GhostWhite;
}
.bookmark_line {
  font-size: 14px;
}
.bookmark_author {
  color: GhostWhite;
}

.wsri_card {
  height: 280px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.wsri_card p {
  width: 100%;
  margin: 0px;
  text-align: center;
}

.card_name {
  color: White;
  font-size: 20px;
}
.card_author {
  color: WhiteSmoke;
}
.card_preface {
  font-size: 14px;
  color: GhostWhite;
}
.card_line {
}

.card_preface:hover, .card_line:hover {
  background-color: WhiteSmoke;
  color: Gray;
}
</style>

{# 作品详细信息显示风格控制区 #}
<style>
.show_work_header {
  border-bottom: 1px solid #ccc;
  background-color: #FFF8DC;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.show_work_menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.show_work_menu_item {
  cursor: pointer;
}
.show_work_menu_item:hover {
  font-weight: bold;
}
.show_work_menu_separator {
  color: LightGrey;
  padding: 0px 5px;
}
.show_work_body {
  background-color: #c2c8f6;
  padding: 10px;
}
.show_work_item {
  width: 100%;
  padding: 10px;
}
.work_item_prompt {
  cursor: pointer;
}
.show_work_body_zw {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.show_work_tag, .show_work_comment, .show_work_analyse {
  font-size: 14px;
  color: #FFF8DC;
  text-indent: 2em;
  text-align: left;
}
.show_work_name {
  font-size: 20px;
  color: White;
  text-align: center;
}
.show_work_author {
  font-size: 18px;
  color: WhiteSmoke;
  text-align: center;
}
.show_work_preface, .show_work_line, .show_work_comment {
  width: 100%;
  text-align: center;
  padding: 5px 2px;
}
.show_work_preface, .show_work_comment {
  font-size: 14px;
}
.show_work_preface {
  color: WhiteSmoke;
}
.show_work_line:hover {
  font-weight: bold;
  background-color: WhiteSmoke;
  color: black;
}
.show_work_comment {
  background-color: WhiteSmoke;
  color: Grey;
}
.show_comment_key {
  color: black;
}
.show_comment_value {
}

.show_work_footer {
  background-color: #FFF8DC;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

